<template>
    <section>
        <goback :getName='goName'></goback>
        <div class="bgcolor"></div>
        <div class="mainRecord">
            <div class="receiveDate">领取日期 : {{time.startTime}}——{{time.endTime}}</div>
            <div>
                <div v-for="(d,index) of fDate2" :key="index">
                    <div class="recordMonth">{{d[0].month}}月</div>
                    <div class="recordDetail">
                        <div v-for="(dd,index) of d">
                            <div>您领取{{dd.name}}</div>
                            <div>{{dd.date1}} {{dd.date2}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { getClaimMaskRecord } from '../../libs/interface'
    export default {
        components: { goback, userInfoGet, WXShare, getClaimMaskRecord },
        data() {
            return {
                userInfo: userInfoGet(),
                goName: '领取记录',
                date: [],
                fDate1: [],
                fDate2: [],
                time: {
                    startTime: '',
                    endTime: '',
                }
            }
        },
        methods: {
           formatDate(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return {
                    date: input,
                    date1: month + '月' + day + '日',
                    date2: hour.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0'),
                    year: year,
                    month: month,
                }
            },
            formatDate2(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '年' + month + '月' + day + '日'
            },
            formatDate3(input) {
                var d = new Date(input)
                var year = d.getFullYear() + 2
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '年' + month + '月' + day + '日'
            },
            classifyDate () {
                let vm = this
                vm.date.forEach(date => {
                    vm.fDate1.push(vm.formatDate(date.claimTime))
                    vm.fDate1[vm.fDate1.length-1].name = date.productName
                })
                vm.fDate2 = new Array(12)
                for (let i = 0; i < vm.fDate2.length; i++) {
                    vm.fDate2[i] = new Array()
                }
                vm.fDate1.forEach(ele => {
                    for (let i = 1; i < 13; i++) {
                        if (ele.month === i) {
                            vm.fDate2[i-1].push(ele)
                        }
                    }
                })
                for (let i = 0; i < vm.fDate2.length; i++) {
                    if (vm.fDate2[i] == '') {
                        vm.fDate2.splice(i, 1);
                        i = i - 1;
                    }
                }
                vm.fDate2.reverse()
            },
        },
        mounted() {
            let vm = this
            let params = {
                memberId: vm.userInfo.id
            }
            getClaimMaskRecord(params, (data) => {
                if (data.code === 1) {
                    vm.date = data.payload
                    vm.time.startTime = vm.formatDate2(data.payload[0].buyTime)
                    vm.time.endTime = vm.formatDate3(data.payload[0].buyTime)
                    vm.classifyDate()
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
        },
    }
</script>
<style scoped>
.bgcolor{
    width: 100%;
    height: 100%;
    z-index: -1;
    position: fixed;
    top: 0;
    background-color: #fff;
}
.mainRecord{
    height: 100%;
    background-color: #fff;
}
.receiveDate{
    padding: .5rem 0;
    font-size: .8rem;
    font-weight: bold;
}
.recordMonth{
    text-align: left;
    margin-left: 1rem;
    font-size: .95rem;
    font-weight: bold;
}
.recordDetail{
    font-size: .7rem;
    text-align: left;
    margin-left: 2rem;
    
}
.recordDetail>div{
    margin: .5rem 1rem .5rem 0;
    display: flex;
    justify-content: space-between;

}
.recordDetail>div div:last-child{
    transform: scale(.9,.9);
    color: #999;
}
</style>